<template>
  <div class="verify">
    <div class="verify-panel" :style="`left: ${innerWidth/2-148}px`">
      <div class="verify-title">请完成安全验证</div>
      <div style="padding: 15px 0;">
        <Verify
          :type="4"
          imgUrl="images/"
          :imgName="imgName"
          :imgSize="{width:'100%',height:'140px'}"
          :vSpace="20"
          :blockSize="{width:'40px',height:'40px'}"
          :barSize="{width:'100%',height:'30px'}"
          :showButton="false"
          @success="success"></Verify>
      </div>
    </div>
  </div>

</template>

<script>
import Verify from 'vue2-verify'

export default {
  name: 'VerifySlide',
  components: {
    Verify
  },
  data() {
    return {
      innerWidth: window.innerWidth,
      imgName: [ '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', ]
    }
  },
  methods: {
    success() {
      this.$emit('login')
    }
  },
}
</script>

<style lang="css">
.verify-bar-area{
  border: 1px solid #7086FF;
  background-color: #86aaff45;
  font-size: 14px;
}
</style>

<style lang="css" scoped>
.verify-panel{
  width: 296px;
  height: 280px;
  background-color: #fff;
  border-radius: 10px;
  margin: 0 auto;
  box-shadow: 1px 2px 5px 1px #292929;
  padding: 30px 10px;
  position: absolute;
  top: 268.34px;
  z-index: 1;
  text-align: center;
}
.verify{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #0000008a;
}
.verify-title{
  font-size: 18px;
  font-weight: 600;
}
</style>
